<template>
  <div id="app">
    <Banner /><br />

    <ul>
      <li>
        <router-link active-class="active" to="/about">About</router-link>
      </li>
      <li><router-link active-class="active" to="/home">Home</router-link></li>
    </ul>
    <div>
      <router-view> </router-view>
    </div>
  </div>
</template>

<script>
import Banner from "./components/Banner.vue";
export default {
  name: "App",
  components: {
    Banner,
  },
};
</script>

<style>
ul {
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}
div {
  float: left;
}
</style>
